<!--
====================================================================
项目列表页面（web/templates/前端电脑版/项目管理/项目列表.html）
====================================================================

【页面功能概述】
- 本页面为"项目管理/项目列表"主界面，支持项目的增删改查、原型图管理、子计划管理、负责人分配等。
- 支持项目的高级搜索、分页、排序、状态筛选。
- 支持项目详情弹窗，展示项目信息、原型图、子计划、负责人等。
- 支持子计划的增删改查，负责人分配。
- 支持项目原型图的上传、预览、删除。
- 支持项目负责人信息的动态获取。

【主要结构说明】
- 页面顶部：标题栏，包含"高级搜索""新建项目"按钮。
- 搜索栏：快速搜索、状态筛选、排序、分页大小选择。
- 项目表格：展示所有项目，含操作下拉菜单（查看、编辑、删除、添加原型图、添加负责人）。
- 分页控件：底部分页。
- 各类模态框：新建/编辑项目、添加原型图、项目详情、添加/编辑/删除子计划、添加负责人等。
- 详情弹窗：左侧为项目信息与原型图，右侧为子计划列表。

【主要交互说明】
- 所有数据交互均通过axios请求后端API，接口返回统一格式。
- 项目、子计划、原型图、负责人等操作均有对应的增删改查API。
- 弹窗/模态框均为动态生成，关闭时自动移除DOM。
- 操作结果通过showToast全局函数提示。
- 删除、危险操作均有showConfirm二次确认。
- 原型图支持九宫格缩略图+点击大图轮播。
- 子计划列表支持滚动、刷新、编辑、删除。
- 负责人信息通过API实时获取。

【主要API依赖】
- /api/projects/get_project/           # 获取项目列表
- /api/projects/create_project/        # 新建项目
- /api/projects/update_project/        # 编辑项目
- /api/projects/delete_project/        # 删除项目
- /api/projects/add_project_prototype/ # 添加原型图
- /api/projects/delete_project_prototype/ # 删除原型图
- /api/projects/get_sub_plan/          # 获取子计划
- /api/projects/create_sub_plan/       # 新建子计划
- /api/projects/update_sub_plan/       # 编辑子计划
- /api/projects/delete_sub_plan/       # 删除子计划
- /api/projects/ProjectLeader/add_project_leader/ # 添加负责人
- /api/projects/ProjectLeader/get_project_leader/ # 获取负责人

【技术栈说明】
- 前端模板：Django模板引擎
- UI框架：Sneat Bootstrap 5
- 图标库：Boxicons (bx)
- JS库：axios（全局已引入）、jQuery（部分模态框操作）、Bootstrap 5（弹窗/组件）
- 所有请求均用axios，禁止fetch

【样式说明】
- 采用Sneat主题主色调，状态/进度/操作按钮有统一配色
- 原型图、子计划、负责人等均有自定义样式
- 支持响应式布局，表格、弹窗、九宫格等自适应
- 滚动条、表头、进度条等有自定义美化

【维护建议】
- 新增API时请保持统一响应格式（code/msg/data）
- 前端如需扩展功能，建议复用现有模态框/弹窗结构
- 复杂交互建议拆分为独立函数，保持主流程清晰
- 如需大改UI建议先在测试环境验证兼容性
- 保持注释与代码同步，便于团队协作
====================================================================
-->

{% extends "前端电脑版/template.html" %}

{% block title %}项目列表{% endblock %}

{% include '前端电脑版/公共样式配置/CSS总样式.html' %}

{% block css %}
<style>
    .project-status {
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.875rem;
    }
    .status-1 { background-color: #e9ecef; color: #566a7f; }
    .status-2 { background-color: #e8f0fe; color: #696cff; }
    .status-3 { background-color: #e8f7ee; color: #71dd37; }
    .status-4 { background-color: #fff4e5; color: #ffab00; }
    .status-5 { background-color: #ffe4db; color: #ff3e1d; }
    .status-6 { background-color: #e7e7ff; color: #696cff; }
    .cursor-pointer {
        cursor: pointer;
    }
    .object-fit-cover {
        object-fit: cover;
    }
    .carousel-item {
        transition: transform .6s ease-in-out;
    }
    .carousel-item.active {
        transform: translateX(0);
    }
    .carousel-item-next:not(.carousel-item-start),
    .active.carousel-item-end {
        transform: translateX(100%);
    }
    .carousel-item-prev:not(.carousel-item-end),
    .active.carousel-item-start {
        transform: translateX(-100%);
    }
    .carousel-control-prev,
    .carousel-control-next {
        width: 10%;
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        padding: 1.5rem;
    }
    #prototypeCarouselModal {
        z-index: 9998;
    }
    #addPrototypeModal {
        z-index: 9997;
    }
    #addSubPlanModal {
        z-index: 9996;
    }
    .status-icon {
        font-size: 1.25rem;
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    .status-icon-1 { background-color: #e9ecef; color: #566a7f; }
    .status-icon-2 { background-color: #e8f0fe; color: #696cff; }
    .status-icon-3 { background-color: #e8f7ee; color: #71dd37; }
    .status-icon-4 { background-color: #fff4e5; color: #ffab00; }
    .status-icon-5 { background-color: #ffe4db; color: #ff3e1d; }
    /* 子计划列表滚动样式 */
    .sub-plan-list-container {
        max-height: 500px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #d9dee3 #f5f5f9;
    }
    .sub-plan-list-container::-webkit-scrollbar {
        width: 6px;
    }
    .sub-plan-list-container::-webkit-scrollbar-track {
        background: #f5f5f9;
        border-radius: 3px;
    }
    .sub-plan-list-container::-webkit-scrollbar-thumb {
        background-color: #d9dee3;
        border-radius: 3px;
    }
    .sub-plan-list-container::-webkit-scrollbar-thumb:hover {
        background-color: #b4b7bd;
    }
    /* 确保表头固定 */
    .sub-plan-table thead {
        position: sticky;
        top: 0;
        background: white;
        z-index: 1;
    }
    .sub-plan-table thead th {
        border-bottom: 2px solid #d9dee3;
    }
    #editSubPlanModal {
        z-index: 9995;
    }
    /* 进度步骤样式 */
    .progress-steps {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
    }
    .progress-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 1;
    }
    .step-icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background-color: #e9ecef;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
        transition: all 0.3s ease;
    }
    .step-icon i {
        font-size: 1.5rem;
        color: #fff;
        display: none;
    }
    .step-label {
        font-size: 0.875rem;
        color: #697a8d;
        transition: all 0.3s ease;
    }
    .progress-line {
        flex: 1;
        height: 2px;
        background-color: #e9ecef;
        margin: 0 0.5rem;
        position: relative;
        top: -1.25rem;
    }
    .progress-step.active .step-icon {
        background-color: #696cff;
    }
    .progress-step.active .step-icon i {
        display: block;
    }
    .progress-step.active .step-label {
        color: #696cff;
        font-weight: 500;
    }
    .progress-step.completed .step-icon {
        background-color: #71dd37;
    }
    .progress-step.completed .step-icon i {
        display: block;
    }
    .progress-step.completed .step-label {
        color: #71dd37;
    }
    .progress-step.completed + .progress-line {
        background-color: #71dd37;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-xxl flex-grow-1 container-p-y">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold py-3 mb-0">
            <span class="text-muted fw-light">项目管理 /</span> 项目列表
        </h4>
        <div class="d-flex gap-2">
            <!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#searchModal">
                <i class='bx bx-search-alt me-1'></i>高级搜索
            </button> -->
            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addProjectModal">
                <i class='bx bx-plus me-1'></i>新建项目
            </button>
        </div>
    </div>

    <!-- 搜索栏 -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-text"><i class='bx bx-search'></i></span>
                        <input type="text" class="form-control" id="searchInput" placeholder="搜索项目名称或描述...">
                    </div>
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="statusFilter">
                        <option value="">全部状态</option>
                        <option value="1">未开始</option>
                        <option value="2">进行中</option>
                        <option value="3">已完成</option>
                        <option value="4">已取消</option>
                        <option value="5">已暂停</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="sortBy">
                        <option value="create_time">创建时间</option>
                        <option value="update_time">更新时间</option>
                        <option value="project_name">项目名称</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="sortOrder">
                        <option value="desc">降序</option>
                        <option value="asc">升序</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="pageSize">
                        <option value="10">10条/页</option>
                        <option value="20">20条/页</option>
                        <option value="50">50条/页</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- 项目列表 -->
    <div class="card">
        <div class="table-responsive text-nowrap">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>项目名称</th>
                        <th>项目负责人</th>
                        <th>项目状态</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="projectTableBody">
                    <!-- 项目数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
        <!-- 分页 -->
        <div class="card-footer">
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center mb-0" id="pagination">
                    <!-- 分页将通过JavaScript动态加载 -->
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- 新建项目模态框 -->
<div class="modal fade" id="addProjectModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新建项目</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addProjectForm">
                    <div class="mb-3">
                        <label class="form-label">项目名称</label>
                        <input type="text" class="form-control" name="project_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">项目描述</label>
                        <textarea class="form-control" name="project_description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">项目文档URL</label>
                        <input type="text" class="form-control" name="project_doc_url">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">项目状态</label>
                        <select class="form-select" name="project_status" required>
                            <option value="1">未开始</option>
                            <option value="2">进行中</option>
                            <option value="3">已完成</option>
                            <option value="4">已取消</option>
                            <option value="5">已暂停</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="addProject()">创建</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加原型图模态框 -->
<div class="modal fade" id="addPrototypeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加原型图</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addPrototypeForm">
                    <input type="hidden" name="project_id" id="prototypeProjectId">
                    <div class="mb-3">
                        <label class="form-label">原型图名称</label>
                        <input type="text" class="form-control" name="prototype_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">原型图描述</label>
                        <textarea class="form-control" name="prototype_description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">原型图文件</label>
                        <input type="file" class="form-control" name="prototype_file" accept="image/*" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="addPrototype()">上传</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑项目模态框 -->
<div class="modal fade" id="editProjectModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑项目</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editProjectForm">
                    <input type="hidden" name="project_id" id="editProjectId">
                    <div class="mb-3">
                        <label class="form-label">项目名称</label>
                        <input type="text" class="form-control" name="project_name" id="editProjectName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">项目描述</label>
                        <textarea class="form-control" name="project_description" id="editProjectDescription" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">项目文档URL</label>
                        <input type="text" class="form-control" name="project_doc_url" id="editProjectDocUrl">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">项目状态</label>
                        <select class="form-select" name="project_status" id="editProjectStatus" required>
                            <option value="1">未开始</option>
                            <option value="2">进行中</option>
                            <option value="3">已完成</option>
                            <option value="4">已取消</option>
                            <option value="5">已暂停</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="updateProject()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 原型图轮播模态框 -->
<div class="modal fade" id="prototypeCarouselModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-body p-0">
                <button type="button" class="btn-close position-absolute top-0 end-0 m-3 bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                <div id="prototypeCarousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <!-- 轮播内容将通过JavaScript动态加载 -->
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#prototypeCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#prototypeCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加子计划模态框 -->
<div class="modal fade" id="addSubPlanModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">创建子计划</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addSubPlanForm">
                    <input type="hidden" name="project" id="subPlanProjectId">
                    <div class="mb-3">
                        <label class="form-label">子计划名称</label>
                        <input type="text" class="form-control" name="sub_plan_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">子计划描述</label>
                        <textarea class="form-control" name="sub_plan_description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">子计划状态</label>
                        <select class="form-select" name="sub_plan_status" required>
                            <option value="1">未开始</option>
                            <option value="2">进行中</option>
                            <option value="3">已完成</option>
                            <option value="4">已取消</option>
                            <option value="5">已暂停</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="createSubPlan()">创建</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加编辑子计划模态框 -->
<div class="modal fade" id="editSubPlanModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑子计划</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editSubPlanForm">
                    <input type="hidden" name="sub_plan_id" id="editSubPlanId">
                    <input type="hidden" name="project" id="editSubPlanProjectId">
                    <div class="mb-3">
                        <label class="form-label">子计划名称</label>
                        <input type="text" class="form-control" name="sub_plan_name" id="editSubPlanName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">子计划描述</label>
                        <textarea class="form-control" name="sub_plan_description" id="editSubPlanDescription" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">子计划状态</label>
                        <select class="form-select" name="sub_plan_status" id="editSubPlanStatus" required>
                            <option value="1">未开始</option>
                            <option value="2">进行中</option>
                            <option value="3">已完成</option>
                            <option value="4">已取消</option>
                            <option value="5">已暂停</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="updateSubPlan()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加项目负责人模态框 -->
<div class="modal fade" id="addProjectLeaderModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加项目负责人</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 添加进度指示器 -->
                <div class="progress-steps mb-4">
                    <div class="progress-step active" id="step1">
                        <div class="step-icon">
                            <i class='bx bx-check-circle'></i>
                        </div>
                        <div class="step-label">选择项目</div>
                    </div>
                    <div class="progress-line"></div>
                    <div class="progress-step" id="step2">
                        <div class="step-icon">
                            <i class='bx bx-check-circle'></i>
                        </div>
                        <div class="step-label">选择子计划</div>
                    </div>
                    <div class="progress-line"></div>
                    <div class="progress-step" id="step3">
                        <div class="step-icon">
                            <i class='bx bx-check-circle'></i>
                        </div>
                        <div class="step-label">完成</div>
                    </div>
                </div>
                <form id="addProjectLeaderForm">
                    <input type="hidden" name="project" id="leaderProjectId">
                    <div class="mb-3">
                        <label class="form-label">选择项目</label>
                        <select class="form-select" id="projectSelect" onchange="loadSubPlansForLeader()">
                            <option value="">请选择项目</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">选择子计划</label>
                        <select class="form-select" name="sub_plan_project" id="subPlanSelect" disabled>
                            <option value="">请先选择项目</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">负责人备注</label>
                        <textarea class="form-control" name="leader_remark" rows="3" placeholder="请输入备注信息"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="addProjectLeader()">添加</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="/static/web/项目列表.js"></script>

{% endblock %}

{% block nav_left %}
{% include "前端电脑版/components/左侧导航栏.html" %}
{% endblock %}

{% block NavBar %}
{% endblock %}

{% include '前端电脑版/公共样式配置/JS总样式.html' %}

{% block footer %}
    {% include "前端电脑版/components/Footer.html" %}
{% endblock %}